<template>
    <div class="warp">
        <div id="banner">
            <ul class="home-banner">
                <li>
                    <a :href="banners[banners.length-1].href">
                        <figure>
                            <img :src="banners[banners.length-1].imgUrl" :alt="banners[banners.length-1].imgAlt" :title="banners[banners.length-1].imgTitle" class="banner-img">
                        </figure>
                    </a>
                </li>
                <li v-for="item of banners">
                    <a :href="item.href">
                        <figure>
                            <img :src="item.imgUrl" :alt="item.imgAlt" :title="item.imgTitle" class="banner-img">
                        </figure>
                    </a>
                </li>
                <li>
                    <a :href="banners[0].href">
                        <figure>
                            <img :src="banners[0].imgUrl" :alt="banners[0].imgAlt" :title="banners[0].imgTitle" class="banner-img">
                        </figure>
                    </a>
                </li>
            </ul>
            <ul class="home-banner-btnlist">
                <li class="btnlist-item btn-selected" @click="moveTo(1)"></li>
                <li class="btnlist-item" @click="moveTo(2)"></li>
                <li class="btnlist-item" @click="moveTo(3)"></li>
                <li class="btnlist-item" @click="moveTo(4)"></li>
            </ul>
        </div>
    </div>
</template>

<script>
	export default {
		name: "HomeBanner",
        props:['banners'],
        data(){
			return{
				domTarget:null,
                index:1,
                timer:null,
                restart:false,
                moving:false,
                btnList:[]
            }
        },
        mounted(){
	        this.domTarget = document.getElementsByClassName("home-banner")[0];
	        this.btnList = document.getElementsByClassName("btnlist-item");
	        this.autoBanner();
        },
        beforeDestroy(){
		    clearInterval(this.timer);
		    this.domTarget = [];
		    this.btnList = [];
        },
        methods:{
			moveBanner(num){
			    if(!this.moving){
			    	this.moving = true;
			    	this.index += num;
			    	let target = this.index/6*100;
			    	this.domTarget.style.transitionDuration = '1s';
                    let timer1 = setTimeout(()=>{
	                    this.domTarget.style.transform = `translateX(-${target}%)`;
	                    clearTimeout(timer1)
                    },0);
                    let t = this.index;
                    if(t===0){
                    	t = 4
                    }
				    if(t===5){
					    t = 1;
				    }
				    let n = 4;
				    while (n--){
				    	if(this.btnList[n]){
						    if(t - 1 === n){
							    this.btnList[n].classList.add('btn-selected');
						    }else{
							    this.btnList[n].classList.remove('btn-selected');
						    }
                        }
                    }
                    let timer2 = setTimeout(()=>{
	                    if(this.index===0){
		                    this.domTarget.style.transitionDuration = '0s';
		                    this.domTarget.style.transform = `translateX(-${4/6*100}%)`;
		                    this.index = 4;
	                    }
	                    if(this.index===5){
		                    this.domTarget.style.transitionDuration = '0s';
		                    this.domTarget.style.transform = `translateX(-${1/6*100}%)`;
		                    this.index = 1;
	                    }
	                    clearTimeout(timer2)
                    },1100);
			    	let timer = setTimeout(()=>{
			    		this.moving = false;
			    		clearTimeout(timer);
                    },1100);
                }
            },
            toLeft(){
                if(!this.moving) this.moveBanner(-1);
            },
            toRight(){
	            if(!this.moving) this.moveBanner(1);
            },
            moveTo(num){
	            if(!this.moving){
		            this.index = num;
		            this.moveBanner(0);
                }
            },
            autoBanner(){
				this.timer = setInterval(()=>{
					this.toRight();
                },5000);
            }
        }
	}
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .warp{
        transition-property: opacity;
        transition-duration:1.5s;
        transition-timing-function: cubic-bezier(.8,0,1,1);
        animation: 1.5s showBanner ease-in-out 1;
    }
    #banner{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .home-banner{
        list-style: none;
        width: 600%;
        display: flex;
        justify-content: center;
        overflow: hidden;
        transition-property: transform;
        transition-duration: 0s;
        transition-timing-function: ease-in-out;
        transform: translateX(-16.6667%);
    }
    .banner-img{
        display: block;
        width: 100%;
        height: auto;
    }
    .home-banner-btnlist{
        list-style: none;
        position: absolute;
        bottom: 10%;
        left:50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;
    }
    .btnlist-item{
        width: 15px;
        height: 15px;
        border:1px solid #fff;
        border-radius: 50%;
        background-color: rgba(255,255,255,0);
        margin:0 10px;
        transition:background-color .5s;
    }
    .btnlist-item:hover{
        cursor: pointer;
        background-color: rgba(255,255,255,.5);
    }
    .btn-selected{
        background-color: rgba(255,255,255,.5);
    }
    @keyframes showBanner {
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
</style>